<template>
  <div id="app">
    <div id="containerMap"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.maps();
  },
  methods: {
    maps() {
      this.map = new AMap.Map("containerMap", {
        zooms: [13, 16], //设置缩放级别范围 3-20 级
        center: [106.280153, 38.470234],
        // pitch:80,
        // rotation:-18,
        // viewMode:'3D',//开启3D视图,默认为关闭
        buildingAnimation: true, //楼块出现是否带动画
        layers: [
          // 卫星
          new AMap.TileLayer.Satellite(),
          // 路网
          new AMap.TileLayer.RoadNet(),
        ],
      }); //初始化地图
      var path1 = [
        [106.248481, 38.472216],
        [106.281269, 38.47309],
      ];
      this.map.on("click", function (e) {
        console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());
      });
      var polygon1 = new AMap.Polygon({
        path: path1,
        strokeColor: "green",
        strokeWeight: 10,
        strokeOpacity: 0.9,
        zIndex: 50,
        bubble: true,
      });
      this.map.add([polygon1]);
    },
  },
};
</script>

<style>
#containerMap {
  width: 100%;
  height: 100vh;
}
</style>
